<template>
  <div class="admin">
    <!-- 缓存团队和序列号 -->
    <keep-alive :include="keepAliveName.join()||'_'">
      <router-view :key="$route.fullPath"></router-view>
    </keep-alive>

    <div v-if="LeftScope"
         @click="setLeftScope(false)"
         @touchmove.prevent
         class="leftScope">
      <mt-popup v-model="LeftScope "
                position="left"
                popup-transition="popup-fade">
        <div @click.stop
             class="leftSlot">
          <div class="head">
            <div class="head_tit">区域负责人管理后台</div>
            <div class="info clearfix">
              <div class="left">
                <img :src="userInfo.icon||Avatar"
                     alt />
              </div>
              <div class="right">
                <p class="name">{{userInfo.name}}</p>
                <p>帐号：{{userInfo.username}}</p>
                <p>手机：{{userInfo.phone}}</p>
              </div>
            </div>
            <div class="routerList">
              <div v-for="(item,index) in Routerlist"
                   :key="index"
                   @click="jump(item)">
                <div v-if="item.name!=='我的团队'|| proxy_type*1 === 1"
                     class="router">
                  <span class="icon">
                    <img :src="item.icon"
                         alt />
                  </span>
                  <span class="name">{{item.name}}</span>
                  <i class="bg"></i>
                </div>
              </div>
            </div>
          </div>
          <div class="features">
            <div @click="changePW"
                 class="change">修改密码</div>
            <div @click="logout">退出登录</div>
          </div>
        </div>
      </mt-popup>
    </div>
  </div>
</template>

<script>
// import store from '@/store'
import { mapGetters, mapMutations } from 'vuex'

export default {
  name: 'Admin',

  computed: {
    ...mapGetters(['LeftScope', 'userInfo', 'keepAliveName', 'proxy_type'])
  },
  data() {
    return {
      Avatar: require('../assets/images/icon/icon_touxiang.png'), //默认头像
      Routerlist: [
        {
          name: '首页',
          icon: require('../assets/images/icon/icon_shouye.png'),
          path: '/home'
          //   show: true
        },
        {
          name: '序列号',
          icon: require('../assets/images/icon/icon_gengduo.png'),
          path: '/serial'
          //   show: true
        },
        {
          name: '我的团队',
          icon: require('../assets/images/icon/icon_wodetuandui.png'),
          path: '/team'
          //   show: store.getters.proxy_type * 1 === 1 ? true : false
        },
        {
          name: '学校学生',
          icon: require('../assets/images/icon/icon_xuexiaoxuesheng.png'),
          path: '/school'
          //   show: true
        },
        {
          name: '交易订单',
          icon: require('../assets/images/icon/icon_dingdanjiaoyi.png'),
          path: '/order'
          //   show: true
        }
      ]
    }
  },
  methods: {
    ...mapMutations([
      'setLeftScope',
      'setUserInfo',
      'setKeepAliveName',
      'setProxy_id',
      'setProxy_type'
    ]),
    jump(item) {
      // console.log(item.path);
      this.$router.push(item.path)
      // this.setLeftScope(false);
    },
    logout() {
      // console.log("logout");
      // this.setLeftScope(false);
      this.setUserInfo(' ')
      this.setKeepAliveName([])
      this.setProxy_id('')
      this.setProxy_type('')
      this.$router.push('login')
      this.$toast('退出成功')
    },
    changePW() {
      // console.log('changePW');
      this.$router.push('login/ChangePW')
      // this.setLeftScope(false);
    }
  }
}
</script>

<style scoped lang="less">
.admin {
  position: relative;
}
.leftScope {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  .leftSlot {
    background-color: #fff;
    opacity: 1;
    height: 100vh;
    width: 80vw;
    .head {
      .head_tit {
        // width: 310px;
        height: 33px;
        font-size: 34px;
        font-weight: 600;
        color: rgba(34, 34, 34, 1);
        line-height: 33px;
        padding: 50px 0 34px 38px;
        border-bottom: 1px solid rgba(229, 229, 229, 1);
      }
      .info {
        // display: flex;
        // justify-content: space-around;
        // align-items: center;
        border-bottom: 16px solid rgba(246, 247, 249, 1);
        padding: 25px 0 33px 38px;
        .left {
          float: left;
          border: 1px solid #ccc;
          overflow: hidden;
          width: 2.5rem;
          height: 2.5rem;
          border-radius: 50%;
          margin-right: 21px;
          img {
            width: 100%;
            height: 100%;
            display: block;
          }
        }
        .right {
          margin-top: 20px;
          float: left;
          p {
            font-size: 24px;
            font-weight: 300;
            color: rgba(102, 102, 102, 1);
            line-height: 36px;
          }
          .name {
            height: 28px;
            font-size: 30px;
            margin-bottom: 20px;
            font-weight: 500;
            color: rgba(34, 34, 34, 1);
            line-height: 33px;
          }
        }
      }
      .routerList {
        .router {
          // display: flex;
          line-height: 34px;
          padding: 30px 0 30px 38px;
          position: relative;
          .icon {
            // width: 38px;
            // height: 38px;
            margin-right: 30px;
            img {
              width: 38px;
              height: 38px;
              vertical-align: bottom;
            }
          }
          .name {
            // width: 58px;
            height: 28px;
            line-height: 33px;
            font-size: 30px;
            font-weight: 500;
            color: rgba(34, 34, 34, 1);
          }
          .bg {
            width: 100%;
            position: absolute;
            top: 94px;
            left: 0;
            height: 2px;
            background: rgba(229, 229, 229, 1);
          }
        }
      }
    }
    .features {
      position: absolute;
      display: flex;
      justify-content: space-around;
      bottom: 0;
      height: 80px;
      line-height: 80px;
      width: 100%;
      border-top: 1px solid rgba(229, 229, 229, 1);
      .change {
        border-right: 1px solid #ccc;
      }
      div {
        flex: 1;
        text-align: center;
        font-size: 30px;
        font-weight: 500;
        color: rgba(102, 102, 102, 1);
      }
    }
  }
}
</style>